<template>
  <div id="app">
    <div>
      <h2>{{goodsChecked.name}}</h2>
      <p>库存 {{goodsChecked.stock}}  价格 {{goodsChecked.price}}</p>
      <div>
        <span>已选择 </span>
        <span v-for="(item, title) of parseChecked()" :key="title" style="margin-right: 12px">
          <b>{{title}}</b>
          <span> {{specItem[item].name}}</span>
        </span>
      </div>
    </div>
    
    <ul>
      <li v-for="(items, title) of specList" :key="title">
        <h3>{{title}}</h3>
        <div>
          <button v-for="item of items" 
            :key="item.key" 
            :class="parseClass(title, item)"
            :disabled="!isAble(title, item)"
            @click="onSpecCheck(title, item)">{{item.name}}</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      goodsItem: [
        { key: '1001', spec: ['type1', 'size1'], stock: 99, price: 3 , name: '可乐 300ml'},
        { key: '1002', spec: ['type2', 'size2'], stock: 3817, price: 4 , name: '雪碧 600ml'},
        { key: '1003', spec: ['type1', 'size3'], stock: 0, price: 9 , name: '可乐 2.5L'},
        { key: '1004', spec: ['type2', 'size1'], stock: 88, price: 3 ,name: '雪碧 300ml' },
        { key: '1005', spec: ['type3', 'size3'], stock: 17, price: 9 ,name: '芬达 2.5L' }
      ],
      specItem: {
        type1: { title: '分类', name: '可乐' },
        type2: { title: '分类', name: '雪碧' },
        type3: { title: '分类', name: '芬达' },
        size1: { title: '容量', name: '300ml' },
        size2: { title: '容量', name: '600ml' },
        size3: { title: '容量', name: '2.5L' }
      },
      specList: {},
      specChecked: {},
      goodsChecked: { name: '--', price: '--', stock: 0 }
    }
  },
  created () {
    this.initSpecList()
  },
  methods: {
    initSpecList () {
      const specList = {}
      for (const item of Object.values(this.goodsItem)) {
        if (!item.spec.length) continue
        for (const key of item.spec) {
          if (!Reflect.has(this.specItem, key)) continue
          const { title, name } = this.specItem[key]
          if (!Reflect.has(specList,title )) specList[title] = {}
          specList[title][key] = { key, name }
        }
      }
      for (const [key, items] of Object.entries(specList)) {
        specList[key] = Object.values(items)
      }

      this.$set(this, 'specList', specList)
    },
    onSpecCheck (title, item) {
      this.$set(this.specChecked, title, this.specChecked[title] === item.key ? undefined : item.key)
      this.parseGoods()
    },
    isAble (specTitle, specItem) {
      const specChecked = {}

      // 遍历取当前类目选择结果
      Object.keys(this.specList).forEach(title => specChecked[title] = this.specChecked[title] || '')
      // 将当前选择的规格带入
      specChecked[specTitle] = specItem.key

      return this.goodsItem.some(item => {
        let i = 0
        for (const k in specChecked) {
          if ((specChecked[k] && item.spec.includes(specChecked[k]) && !!item.stock) || !specChecked[k]) i++
        }
        console.log(i)
        return i === Object.values(this.specList).length
      })
    },
    parseClass (title, item) {
      const active = this.specChecked[title] === item.key ? 'active': ''
      const disabled = !this.isAble(title, item) ? 'disabled': ''
      return [active, disabled].join(' ')
    },
    parseChecked () {
      const specChecked = {}
      for (const [title, key] of Object.entries(this.specChecked)) {
        if (!key) continue
        specChecked[title] = key
      }
      return specChecked
    },
    parseGoods () {
       this.$set(this, 'goodsChecked', { name: '--', price: '--', stock: 0 })
      const specChecked = Object.values(this.specChecked)
      for (const item of this.goodsItem) {
        if (item.spec.filter(v => specChecked.indexOf(v) !== -1).length === item.spec.length) {
          this.$set(this, 'goodsChecked', item)
        }
      }
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  width: 400px;
  margin: 60px auto;
  padding: 20px 30px 30px;
  border-radius: 6px;
  border: 1px solid #eee;
}

ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

button {
  padding: 6px 12px;
  margin-right: 12px;
  background: #fff;
  border: 1px solid #eee;
}

button.active {
  background: #0089fb;
  border-color: #0089fb;
  color: #fff;
}

button.disabled {
  background: #fafafa;
  border: 1px dashed #eee;
}
</style>
